<template>
    <a-modal :title="title" :width="1200" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">


        <a-list :grid="{ gutter:8, column: 4 }"
                :pagination="pagination"
                :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index" :bordered="false">
                <a-card :hoverable="true" style="width: 100%">
                    <img slot="cover" alt="example" :src="item.src"/>
                    <template slot="actions" class="ant-card-actions">
                        <a>{{item.name}}</a>
                        <a>
                            <a-icon type="edit"/>
                            修改</a>


                        <a-popconfirm
                                title="确定要删除这个照片吗"

                                @confirm="removePhoto(item.id)"

                        >
                            <a-icon type="delete"/>
                            删除
                        </a-popconfirm>






                    </template>
                </a-card>
            </a-list-item>
        </a-list>
        <PhotoUpload v-if="uploadShow" :albumId="showRecord.id" @closeModal="closeUpload"/>

        <template slot="footer">

            <a-button type="primary" @click="openUpload">上传新照片</a-button>
        </template>
    </a-modal>
</template>
<script>
    import {pagination} from "../public/colums";
    import {albumPhotoList, albumPhotoDelete} from "../public/http";

    export default {
        props: ["showRecord"],
        components: {
            PhotoUpload: () => import('./PhotoUpload')
        },
        data() {
            return {
                loading: false, //按钮Loading
                title: "相册照片详情",
                visible: true, //modal 显示状态
                dataSource: [],
                pagination: {
                    ...pagination,
                    pageSize: 8,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getPhotoList();
                    }
                },
                //============上传组件控制参数========
                uploadShow: false,
            };
        },
        methods: {


            //删除照片
            removePhoto(id){
                albumPhotoDelete(id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getPhotoList();
                    }
                })
            },


            openUpload() {
                this.uploadShow = true;
            },
            //关闭上传窗口
            closeUpload(e) {
                this.uploadShow = false;
                if (e.render) {
                    this.getPhotoList();
                }
            },
            //1.0 获取表格数据
            getPhotoList() {
                let albumId = this.showRecord.id;
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                albumPhotoList(albumId, this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


        },
        created() {
            this.getPhotoList();
        }
    };
</script>
